<template>
  <el-select
    v-model="dataValue"
    clearable
    filterable
    remote
    :disabled="disabled"
    :multiple="multiple"
    reserve-keyword
    :placeholder="placeholder"
    :remote-method="remoteMethod"
    :loading="loading"
    @change="valueChange">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item[label] + '('+ item.id +')'"
      :value="item">
    </el-option>
  </el-select>
</template>

<script>
import {getBaseOptions, requestBase} from "@/api/common";

export default {
  name: 'RemoteSelect',
  props: {
    url: {type: String, required: true, default: undefined},
    size: {type: Number, required: false, default: 100},
    placeholder: {type: String, required: false, default: '请输入关键词'},
    label: {type: String, required: true, default: 'name'},
    value: {type: [Object, Array], required: false, default: undefined},
    index: {type: Number, required: false, default: 0},
    columnName: {type: String, required: false, default: ''},
    multiple: {type: Boolean, required: false, default: false},
    disabled: {type: Boolean, required: false, default: false},
  },
  data() {
    return {
      options: [],
      loading: false,
      dataValue: undefined,
    }
  },
  watch: {
    value(newValue, preValue) {
      if (this.multiple) {
        if (newValue) {
          const dataValue = []
          newValue.forEach(e => {
            dataValue.push({value: e.id, label: e[this.label],id: e.id, [this.label]: e[this.label]})
          })
          this.dataValue = dataValue
        }
      } else {
        if (newValue) {
          this.dataValue = {value: newValue.id, label: newValue[this.label],id: newValue.id, [this.label]: newValue[this.label]}
        }
      }
      // console.log('=========+++++++', newValue, this.dataValue)
    },
    // dataValue(newValue, preValue) {
    //   this.$emit('columnValChange', newValue, this.index, this.columnName)
    // },
  },
  created() {
    if (this.multiple) {
      if (this.value) {
        const dataValue = []
        this.value.forEach(e => {
          dataValue.push({value: e.id, label: e[this.label],id: e.id, [this.label]: e[this.label]})
        })
        this.dataValue = dataValue
      }
    } else {
      if (this.value) {
        this.dataValue = {value: this.value.id, label: this.value[this.label],id: this.value.id, [this.label]: this.value[this.label]}
      }
    }
    this.remoteMethod(null)
  },
  methods: {
    remoteMethod(query) {
      const self = this
      self.loading = true;
      const conditions = []
      if (query) {
        conditions.push({c: self.label, d: 'LL', v: [query]})
      } else {
        if (this.multiple) {
          if (self.value) {
            conditions.push({c: 'id', d: 'IN', v: self.value.map(e => e.id)})
          }
        } else {
          if (self.value) {
            conditions.push({c: 'id', d: 'EQ', v: [self.value.id]})
          }
        }
      }
      const request = {
        page: 1, size: this.size,
        conditions: JSON.stringify(conditions),
        show: 'id,' + self.label
      }
      requestBase({url: self.url, params: request}).then(res => {
        const {data} = res.data
        const options = []
        data.forEach(e => {
          options.push({value: e.id, label: e[self.label],id: e.id, [self.label]: e[self.label]})
        })
        self.options = options;
        self.loading = false;
      })

    },
    valueChange(e) {
      this.$emit('columnValChange', e, this.index, this.columnName)
    }
  }
}
</script>
